<template>
	<view class="box">
		<view class="content">
			<view class="item">
				<view class="title">
					转账手机号:
				</view>
				<u-input v-model="num" type="number" :border="border" placeholder="" 
					:custom-style="{background:'#ededed',borderRadius:'20rpx',textIndent: '40rpx'}" />
			</view>
		<view class="item">
			<view class="title" v-if="userName.nick_name">
				用户名称:{{userName.nick_name}}
			</view>
			</view>
			<view class="item">
				<view class="title">
					转账金额:
				</view>
				<u-input v-model="money" :type="type" :border="border" placeholder=""
					:custom-style="{background:'#ededed',borderRadius:'20rpx',textIndent: '40rpx'}" />
			</view>
			<view class="text">
				钱包余额:{{ setDecimalPoint(userInfo.balance) || 0 }}元
			</view>
			<view class="button" @click="onsubmit">
				立即转账
			</view>
		</view>
		
		<u-popup v-model="showPassword" mode="center" width="600"  :closeable="true"  border-radius="20">
			<view class="password_box">
				<view class="title">
					请输入密码
				</view>
				<u-input class="input" v-model="password" type="password" :password-icon='false' />
				<view class="button" @click="onSubmitOk">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user';
		import * as withdrawApi from '@/api/withdrawCash/index.js';
	export default {
		data() {
			return {
				userInfo:{},
				num:'',
				money:'',
				userName:{},
				password:'',
				showPassword:false
			};
		},
		onShow() {
			this.init()
		},
		watch:{
			num(val){
				if(val.length===11){
					withdrawApi.transferUser({
						mobile:val
					}).then(res=>{
						this.userName = res.data
					})
				}
			}
		},
		methods:{
			init(){
				UserApi.info().then(result => {
					this.userInfo = result.data.userInfo
				})
			},
			setDecimalPoint(str) {
				if (String(str).indexOf(".") !== -1) {
					return String(str).substr(0, String(str).indexOf(".") + 3)
				} else {
					return `${str}.00`
				}
			},
			onsubmit(){
				if(!this.userName.user_id) return this.$toast('请输入正确的号码！')
				if(!this.money) return this.$toast('请输入金额！')
				this.showPassword = true
			},
			onSubmitOk(){
				withdrawApi.transfer({
					pid:this.userName.user_id,
					money:this.money,
					pay_password:this.password
				}).then(res=>{
					this.$success('转账成功！')
					this.showPassword = false
					setTimeout(()=>{
						this.init()
					},500)
				}).catch(err=>{
					if(err.errMsg === "请选择接收人") this.$toast('没有该用户')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	background-color: #fafafa;
	.content{
		margin: 40rpx 20rpx;
		background-color: white;
		height:500rpx;
		border-radius: 25rpx;
		padding:10rpx 20rpx;
		box-sizing: border-box;
		
		.item{
			margin-top: 25rpx;
			.title{
				margin: 0  0 15rpx 25rpx;
				font-weight: 600;
				font-size: 30rpx;
			}
		}
		.text{
			font-weight: 600;
			font-size: 24rpx;
				margin: 15rpx  0 0 25rpx;
		}
		.button{
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #f93124;
			text-align: center;
			color: white;
			border-radius: 40rpx;
		}
	}
}


.password_box{
		.title{
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
			margin: 30rpx 0;
		}
		.input{
			width: 80%;
			margin:0 auto;
			margin-bottom: 30rpx;
		}
		.button{
			width: 500rpx;
			height: 70rpx;
			background-color: rgb(255, 44, 59);
			border-radius: 25rpx;
			margin: 30rpx auto;
			text-align: center;
			color: white;
			line-height: 70rpx;
		}
	}
</style>